<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
    需求：
    从服务器端返回一个商品的价格price,这个 price 的值可能是这几种情况: '',null,undefind,60.5
    需求:
        如果是'',null,undefined,页面上统一显示为 -
        如果不是，'',null,undefined,则页面上显示真实的数字即可。
    这个过滤器在 Vue3当中，已经将过滤器语法废弃了
-->

<div id="app">
    <h1>{{msg}}</h1>
    <h1>商品价格: {{formatPrice}}</h1>
    <h1>商品价格: {{formatPrice2()}}</h1>
    <h1>商品价格: {{price | filterA | filterB(3)}}</h1>
    <input type="text" :value="price | filterA | filterB(3)">
<!--    <input type="text" v-model="price | filterA | filterB(3)">-->
<!--    注意过滤器：只能用在两个地方：1.插值语法，2事件中-->
</div>

<div id="app2">
    <h2>商品价格：{{price | filterA | filterB(3)}} </h2>
</div>

<script>

    // 配置全局的过滤器
    Vue.filter('过滤器的名字/')
    Vue.filter('filterA',function (val) {

        if(val === '' || val === undefined || val === null) {
            return '-'
        }
        return val
    })

    Vue.filter('filterB',function (val,number) {
        console.log(number)
        // 确保传递过来的数据val，保留两位小数
        return val.toFixed(number)
    })

    const vm = new Vue({
        el: '#app2',
        data: {
            msg: '过滤器',
            price: 50.6
        }
    })

    const vm2 = new Vue({
        el:'#app',
        data:{
            msg:'过滤器',
            price: 50.6
        },
        computed:{
            formatPrice(){
                if(this.price === '' || this.price === undefined || this.price === null) {
                    return '-'
                }
                return this.price
            }
        },
        methods:{
            formatPrice2(){
                if(this.price === '' || this.price === undefined || this.price === null) {
                    return '-'
                }
                return this.price
            }
        },

        /*filters:{
            filterA(val){
                // console.log("@",val)
                if(val === '' || val === undefined || val === null) {
                    return '-'
                }
                return val
            },
            filterB(val,number){
                console.log(number)
                // 确保传递过来的数据val，保留两位小数
                return val.toFixed(number)
            }
        }*/
    })
</script>

</body>
</html>